<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<canvas id="myCanvas" width="400" height="300"></canvas>

<script type="text/javascript">
var can = document.getElementById("myCanvas"),
	ctx = can.getContext("2d");
window.onload = function() {
	
	//ctx.clearRect(0, 0, can.width, can.height);

	tooop();

	ctx.save();
	ctx.beginPath();
	ctx.fillStyle="#fff";
	ctx.arc(can.width/2, can.height/2, 50, Math.PI*2, 0);
	ctx.fill();
	ctx.closePath();
	ctx.clip();


	drawCircle( Math.random()*can.width, Math.random()*can.height);
	drawCircle( Math.random()*can.width, Math.random()*can.height);
	drawCircle( Math.random()*can.width, Math.random()*can.height);
	drawCircle( Math.random()*can.width, Math.random()*can.height);
	drawCircle( Math.random()*can.width, Math.random()*can.height);
	drawCircle( Math.random()*can.width, Math.random()*can.height);
};

function perspective() {}

function drawCircle(x, y) {
	ctx.save();

	ctx.beginPath();
	ctx.fillStyle = "#f00";
	ctx.arc(x, y, 10, Math.PI*2, 0);
	ctx.fill();
	ctx.closePath();
	ctx.restore();
}

function tooop() {
	ctx.save();

	ctx.beginPath();
	ctx.fillStyle = "#333";
	ctx.rect(0, 0, can.width, can.height);
	ctx.fill();
	ctx.closePath();

	ctx.font = "bold 40px Arial";
	ctx.fillStyle = "#f0f0f0";
	ctx.fillText("张三与李四", 40, 100);

	ctx.restore();
}
</script>
</body>
</html>